<template>
  <div>
    <head-item></head-item>
    <div id="page-content">
      <!--      走马灯展示    -->
      <div class="top-content">
        <div class="container">
          <div class="row">
            <el-carousel :interval="5000" arrow="always" height="500px">
              <el-carousel-item class="el-carousel__item" v-for="item in this.topImage" :key="item">
                <img class="carousel-image" :src="item"/>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <!--      博客展示      -->
      <div class="main-content">
        <div class="container">
          <div class="row">
            <div class="article col-xs-12 col-sm-8 col-md-8">
              <div class="ajax-load-box posts-con">
                <div v-for="(blog,index) in blogs" :key="index" @click="this.viewBlog(blog)" style="text-align: center">
                  <div class="ajax-load-con content wow fadeInUp" v-if="blog.hasImage <= 0">
                    <div class="content-box posts-image-box">
                      <div class="posts-default-title">
                        <h2><a @click="this.viewBlog(blog)" title="{{blog.title}}">{{ blog.title }}</a></h2>
                      </div>
                      <div class="post-images-item">

                      </div>
                      <div class="posts-default-content">
                        <div class="posts-text">{{ blog.description }}</div>
                      </div>
                      <div class="posts-default-info">
                        <ul>
                          <li class="post-author hidden-xs">
                            <div class="avatar"><img alt='{{blog.user.username}}' :src="blog.user.avatar" height='96'
                                                     width='96'/>
                            </div>
                            {{ blog.user.username }}
                          </li>
                          <li class="ico-time"><i class="icon-clock-1"></i> {{ blog.created }}</li>
                          <li class="ico-eye hidden-xs"><i class="icon-eye-4"></i> {{ blog.views }}</li>
                          <li class="ico-like hidden-xs"><i class="icon-heart"></i> {{ blog.liked }}</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="ajax-load-con content wow fadeInUp" v-else-if="blog.hasImage < 3">
                    <div class="content-box posts-gallery-box">
                      <div class="posts-gallery-img">
                        <a @click="this.viewBlog(blog)" title="{{blog.title}}" target="_blank">
                          <img class="lazy" :src="blog.images" width="231" height="173"
                               alt="图片加载错误"/>
                        </a>
                      </div>
                      <div class="posts-gallery-content">
                        <h2><a @click="this.viewBlog(blog)" title="{{blog.title}}">{{ blog.title }}</a></h2>
                        <div class="posts-gallery-text">
                          {{ blog.description }}
                        </div>
                        <div class="posts-default-info posts-gallery-info">
                          <ul>
                            <li class="post-author hidden-xs">
                              <div class="avatar"><img alt='{{blog.user.username}}' :src="blog.user.avatar" height='96'
                                                       width='96'/>
                              </div>
                              <a @click="this.viewBlog(blog)" target="_blank">{{ blog.user.username }}</a></li>
                            <li class="postoriginal hidden-xs"><span><i
                                class="icon-cc-1"></i>{{ blog.isOriginal == "yes" ? "原创" : "转载" }}</span></li>
                            <li class="ico-time"><i class="icon-clock-1"></i> {{ blog.created }}</li>
                            <li class="ico-eye hidden-xs"><i class="icon-eye-4"></i> {{ blog.views }}</li>
                            <li class="ico-like hidden-xs"><i class="icon-heart"></i> {{ blog.liked }}</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="ajax-load-con content wow fadeInUp" v-if="blog.hasImage >= 3">
                    <div class="content-box posts-image-box">
                      <div class="posts-default-title" style="text-align: center;">
                        <h2><a @click="this.viewBlog(blog)" title="{{blog.title}}" target="_blank">{{ blog.title }}</a>
                        </h2>
                      </div>
                      <div class="post-images-item">
                        <ul>
                          <li v-for="(img,index) in blog.images" :key="index">
                            <div class="image-item"><a href="#">
                              <div class="overlay"></div>
                              <img class="lazy" :src="img" alt=""/> </a>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <div class="posts-default-content">
                        <div class="posts-text">{{ blog.description }}</div>
                      </div>
                      <div class="posts-default-info">
                        <ul>
                          <li class="post-author hidden-xs">
                            <div class="avatar"><img alt='{{blog.user.username}}' :src="blog.user.avatar" height='96'
                                                     width='96'/>
                            </div>
                            <a href="http://www.lmlblog.com/" target="_blank">{{ blog.user.username }}</a></li>
                          <li class="ico-time"><i class="icon-clock-1"></i> {{ blog.created }}</li>
                          <li class="ico-eye hidden-xs"><i class="icon-eye-4"></i> {{ blog.views }}</li>
                          <li class="ico-like hidden-xs"><i class="icon-heart"></i> {{ blog.liked }}</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="clearfix"></div>
              <!--              <div id="ajax-load-posts">
                              <button id="fa-loadmore" class="button button-more wow fadeInUp" data-wow-delay="0.3s" data-home="true"
                                      data-paged="2" data-action="fa_load_postlist" data-total="4" @click="this.loadMore(blogs)">加载更多
                              </button>

                            </div>-->
              <div class="block">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    @current-change="handleCurrentChange">
                </el-pagination>
              </div>

            </div>
            <div class="sidebar col-xs-12 col-sm-4 col-md-4">
              <!--  侧边推荐专题    -->
              <div class="widget suxingme_topic">
                <h3><span>推荐专题</span></h3>
                <ul class="widget_suxingme_topic" v-for="(cate,index) in this.cates" :key="index">
                  <li v-if="index<3"><a href="#" title="{{cate.category}}">
                    <div class="overlay"></div>
                    <div class="image" :style="{backgroundImage: 'url(data:'+cate.cateImage+')'}"></div>
                    <div class="title">
                      <h4>{{ cate.category }}</h4>
                      <div class="meta"><span>查看专题</span></div>
                    </div>
                  </a></li>
                </ul>
              </div>
              <!--  侧边最新文章    -->
              <div class="widget widget_suxingme_postlist">
                <h3><span>最新文章</span></h3>
                <ul class="recent-posts-widget">
                  <li class="one"><a href="#" title="响应式个人杂志WordPress博客主题">
                    <div class="overlay"></div>
                    <div class="title"><span>2017-10-25</span>
                      <h4>响应式个人杂志Woss博客主题</h4>
                    </div>
                  </a></li>
                  <li class="others">
                    <div class="image"><a href="#" title="Magneto响应WordPress杂志和博客主题">
                      <img class="lazy"
                           src="../assets/images/10.jpg"
                           alt="Magneto响应WordPress杂志和博客主题"/>
                    </a></div>
                    <div class="title">
                      <h4><a href="#" title="Magneto响应WordPress杂志和博客主题">Magneto响应WordPress杂志和博客主题</a></h4>
                      <span>2017-10-25</span></div>
                  </li>
                  <li class="others">
                    <div class="image"><a href="#" title="Linx - WordPress博客和杂志的主题"> <img class="lazy"
                                                                                          src="../assets/images/9.jpg"
                                                                                          alt="Linx - WordPress博客和杂志的主题"/>
                    </a></div>
                    <div class="title">
                      <h4><a href="#" title="Linx - WordPress博客和杂志的主题">Linx - WordPress博客和杂志的主题</a></h4>
                      <span>2017-10-25</span></div>
                  </li>
                  <li class="others">
                    <div class="image"><a href="#" title="个人生活博客和杂志的WordPress主题"> <img class="lazy"
                                                                                       src=""
                                                                                       alt="个人生活博客和杂志的WordPress主题"/>
                    </a></div>
                    <div class="title">
                      <h4><a href="#" title="个人生活博客和杂志的WordPress主题">个人生活博客和杂志的WordPress主题</a></h4>
                      <span>2017-10-25</span></div>
                  </li>
                  <li class="others">
                    <div class="image"><a href="#" title="Penta响应博客的WordPress主题"> <img class="lazy"
                                                                                       src=""
                                                                                       alt="Penta响应博客的WordPress主题"/>
                    </a></div>
                    <div class="title">
                      <h4><a href="#" title="Penta响应博客的WordPress主题">Penta响应博客的WordPress主题泄漏</a></h4>
                      <span>2017-10-25</span></div>
                  </li>
                </ul>
              </div>
              <!--  侧边联系窗口    -->
              <div class="widget suxingme_social">
                <h3><span>深入了解我！</span></h3>
                <div class="attentionus">
                  <ul class="items clearfix">
                    <span class="social-widget-link social-link-weibo">
                      <span class="social-widget-link-count">
                        <i class="icon-weibo"></i>crabin博客
                      </span>
                      <span class="social-widget-link-title">新浪微博</span>
                      <a href="https://weibo.com/u/7501728013" target="_blank" rel="nofollow"></a>
                    </span>
                    <span class="social-widget-link social-link-tencent-weibo">
                      <span class="social-widget-link-count">
                        <i class="icon-graduation-cap"></i>crabin_lpb博客
                      </span>
                      <span class="social-widget-link-title">csdn博客</span>
                      <a href="https://blog.csdn.net/m0_52149675?type=blog" target="_blank" rel="nofollow"></a>
                    </span>
                    <span class="social-widget-link social-link-qq">
                      <span class="social-widget-link-count">
                        <i class="icon-qq"></i>1528392308</span>
                      <span class="social-widget-link-title">QQ号</span>
                      <a href="http://wpa.qq.com/msgrd?v=3&uin=1528392308&site=qq&menu=yes" rel="nofollow"></a>
                    </span>
                    <span class="social-widget-link social-link-email">
                      <span class="social-widget-link-count">
                        <i class="icon-mail"></i>1528392308@qq.com
                      </span>
                      <span class="social-widget-link-title">QQ邮箱</span>
                      <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1528392308@qq.com" target="_blank"
                         rel="nofollow"></a>
                    </span>
                    <span class="social-widget-link social-link-wechat">
                      <span class="social-widget-link-count">
                        <i class="icon-wechat"></i>Cralpbin
                      </span>
                      <span class="social-widget-link-title">微信号</span>
                      <a id="tooltip-s-weixin" href="javascript:void(0);"></a>
                      <div class="f-weixin-dropdown">
                        <div class="tooltip-weixin-inner">
                          <h3>扫码加我微信</h3>
                          <div class="qcode"><img src="../assets/images/weixin.png" width="160" height="160" alt="微信号">
                          </div>
                        </div>
                        <div class="close-weixin"><span class="close-top"></span> <span
                            class="close-bottom"></span></div>
                      </div>
                    </span>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>

    <!--   确认注销对话框-->
    <el-dialog
        title="提示"
        :visible.sync="this.confirmLogout"
        width="30%"
        :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
            <el-button @click="this.confirmLogout = false">取 消</el-button>
            <el-button type="primary" @click="this.confirmLogout = false">确 定</el-button>
          </span>
    </el-dialog>

    <!--  底面    -->
    <foot-item></foot-item>
    <div class="search-form">
      <form method="get" action="" role="search">
        <div class="search-form-inner">
          <div class="search-form-box">
            <input class="form-search" type="text" name="s" placeholder="键入搜索关键词">
            <button type="submit" id="btn-search"><i class="icon-search"></i></button>
          </div>
          <div class="search-commend">
            <h4>大家都在搜</h4>
            <ul>
              <li><a href="#">个人博客模板</a></li>
              <li><a href="#">网页模板</a></li>
            </ul>
          </div>
        </div>
      </form>
      <div class="close-search"><span class="close-top"></span> <span class="close-bottom"></span></div>
    </div>
    <div class="f-weixin-dropdown">
      <div class="tooltip-weixin-inner">
        <h3>扫码加我微信</h3>
        <div class="qcode"><img src="../assets/images/weixin.png" width="160" height="160" alt="微信号">
        </div>
      </div>
      <div class="close-weixin"><span class="close-top"></span> <span class="close-bottom"></span></div>
    </div>
  </div>
</template>

<script>
import {getRequest} from "../utils/api";
import HeadItem from "@/components/head-item";
import FootItem from "@/components/foot-item";

export default {
  name: "index",
  components: {FootItem, HeadItem},
  data() {
    return {
      blogs: [],
      cates: [],
      localImages: [],
      descBlogs: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      confirmLogout: false,
      topImage: [
        'https://crabin-01-1309266318.cos.ap-guangzhou.myqcloud.com/image/free1.jpg',
        'https://crabin-01-1309266318.cos.ap-guangzhou.myqcloud.com/image/free5.jpg',
        'https://crabin-01-1309266318.cos.ap-guangzhou.myqcloud.com/image/free6.jpg',
        'https://crabin-01-1309266318.cos.ap-guangzhou.myqcloud.com/image/free7.jpg'
      ],
    }
  },
  methods: {

    handleCurrentChange(val) {
      this.loadBlogs(val, this.pageSize)
    },
    loadBlogs(currentPage, size) {
      let url = '/blog/blogs/?currentPage=' + currentPage + '&size=' + size;
      getRequest(url).then(resp => {
        if (resp) {
          this.blogs = resp.data.data
          this.total = resp.data.total
          this.blogs.forEach(blog => {
            if (blog.hasImage >= 3) {
              this.uploadCover(blog.id)
            }
          })
          //浅复制 vue变量双向绑定
          var localBlogs = JSON.parse(JSON.stringify(this.blogs))
          this.descBlogs = JSON.parse(JSON.stringify(this.blogs))

          this.sortByViews(localBlogs)
          window.sessionStorage.setItem("localBlogs", JSON.stringify(localBlogs))
        }
      })
    },
    sortByViews(blogs) {
      for (let i = 0; i < blogs.length; i++) {
        for (let j = 0; j < blogs.length - 1 - i; j++) {
          if (blogs[j + 1].views > blogs[j].views) {
            let temp = blogs[j + 1]
            blogs[j + 1] = blogs[j]
            blogs[j] = temp
          }
        }
      }
      return blogs
    },
    // 加载专栏
    loadCate() {
      getRequest('/cates/init').then(resp => {
        if (resp) {
          this.cates = resp.data
        }
      })
    },
    viewBlog(blog) {
      getRequest('/info/' + blog.id).then(resp => {
        if (resp) {
          blog.content = resp.data
          window.sessionStorage.setItem("thisBlog", JSON.stringify(blog))
          //跳转到具体游览页面
          this.$router.replace('/blog')
        }
      })

    },
    uploadCover(id) {
      getRequest('/upload/covers/?id=' + id).then(resp => {
        if (resp) {
          this.localImages.join("images",resp)
          this.localImages.join("id",id)
        }
      })
    },

  },
  created() {
    this.loadBlogs(1, 10);
    this.loadCate();
  },

}

</script>

<style scoped>
@import url('../assets/css/owl.carousel.min.css');
@import url('../assets/css/fontello.css');
@import url('../assets/css/reset.css');
@import url('../assets/css/style.css');

.el-carousel__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-image {
  max-width: 100%;
}


.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>